<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //文档加载完成后执行
        window.onload = function () {
            //获得需要操作的元素对象
            var all = document.querySelector("#all");
            var reverse = document.querySelector("#reverse");

            //获得所有水果
            var fruits = document.getElementsByName("fruit");//数组


            //为全选和反向按钮绑定事件
            all.onclick = function () {
                //所有水果的选中状态=全选按钮的状态
                for (let i = 0; i < fruits.length; i++) {
                    fruits[i].checked = this.checked;
                }
            }

            reverse.onclick = function () {
                //所有水果的状态=自己原来状态的反向
                for (let j = 0; j < fruits.length; j++) {
                    fruits[j].checked = !fruits[j].checked;
                }
            }
        };


    </script>
</head>

<body>
    <input type="checkbox" id="all">全选
    <input type="checkbox" id="reverse">反选</input>
    <p><input type="checkbox" name="fruit">香蕉</p>
    <p><input type="checkbox" name="fruit">苹果</p>
    <p><input type="checkbox" name="fruit">蓝莓</p>
    <p><input type="checkbox" name="fruit">西瓜</p>

</body>

</html>